<template>
  <div class="common-layout">
    <HeadContent title="排班类型设定"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      排班类型设定
      <el-header>
        <div>导航栏</div>
      </el-header>
      <el-main>
        <el-space wrap :size="sizeSpace">
          <!-- <el-card  shadow="hover"> -->
          <div style="margin-left: 5vh;">
            <el-button type="primary" @click="router.push('/addpaibanleixing')"><el-icon>
                <Plus />
              </el-icon>&nbsp;添加</el-button>
          </div>
          <!-- </el-card> -->

          <el-card style="width: 150vh" shadow="hover">
            <el-table :data="scheduleList" style="width: 100%">
              <el-table-column prop="type" label="排班类型" width="200" />
              <el-table-column prop="checkInTime" label="上班时间" width="200" />、
              <el-table-column prop="checkOutTime" label="下班时间" width="200" />
              <el-table-column fixed="right" label="操作" min-width="400">
                <template style="display: flex" #default="scope">

                  <el-button type="warning" plain @click="showScheduleInfo(scope.row)">
                    <el-icon>
                      <Refresh />
                    </el-icon>&nbsp;修改
                  </el-button>
                  <div class="CaozuoDiv">
                    <el-button type="danger" @click="deleteSchedulefn(scope.row)">
                      <el-icon>
                        <Minus />
                      </el-icon>&nbsp;删除
                    </el-button>
                  </div>

                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 分页 -->

          <div class="demo-pagination-block">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
              :background="background" :disabled="disabled" layout="prev, pager, next, jumper" :total="1000"
              @size-change="handleSizeChange" @current-change="handleCurrentChange" />
          </div>
        </el-space>
      </el-main>
    </el-container>
  </div>
  <!--弹出框内容-->
  <el-dialog v-model="dialogFormVisible" title="修改排班" width="500">
    <el-form :model="updateform">
      <el-form-item label="排班类型：" :label-width="formLabelWidth">
        <el-input v-model="updateScheduleData.type" />
      </el-form-item>
      <el-form-item label="上班时间" :label-width="formLabelWidth">
        <div class="example-basic">
          <el-time-picker v-model="updateScheduleData.checkInTime" placeholder="请选择"  />

        </div>
      </el-form-item>
      <el-form-item label="下班时间" :label-width="formLabelWidth">
        <div class="example-basic">
          <el-time-picker v-model="updateScheduleData.checkOutTime" placeholder="请选择"  />

        </div>
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button type="primary" @click="updateSchedulefn(updateScheduleData)">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
  Refresh, Plus, Minus,

} from '@element-plus/icons-vue'
import TagComtent from '@/components/TagComtent.vue'
import { getScheduleList } from '@/api/schedule'
import type { schedule } from '@/model'
import { deleteSchedule,updateSchedule } from '@/api/schedule'

// const flag = ref<boolean>(true)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const updateform = reactive({
  scheduling: '',
  startWork: '',
  endWork: '',
  
})
function doDialogFormVisible() {
  dialogFormVisible.value = true;
  updateform.scheduling = ''
  updateform.startWork = ''
  updateform.endWork = ''



}
import HeadContent from '@/components/HeadContent.vue'


const scheduleList = ref<schedule[]>([])
const getScheduleListData = async () => {
  const res = await getScheduleList()
  res.data.forEach((item:schedule)=>{
    item.checkInTime=item.checkInTime.split('T')[1]
    item.checkOutTime=item.checkOutTime.split('T')[1]
  })
  scheduleList.value = res.data
}
getScheduleListData()

//修改按钮  
const updateScheduleData = ref<schedule>({
  id:0,
  type:'',
  checkInTime:'',
  checkOutTime:''
})
//弹窗回显
// 弹窗回显
const showScheduleInfo = async (item: schedule) => {
  console.log(item)
  updateScheduleData.value.id = item.id
  updateScheduleData.value.type = item.type


  dialogFormVisible.value = true
  console.log(updateScheduleData.value)
}


const updateSchedulefn = async (updateScheduleData:schedule) => {
  dialogFormVisible.value = false
  const res = await updateSchedule(updateScheduleData)
  console.log(updateScheduleData)
}
//删除按钮
const deleteSchedulefn = async (row:schedule) => {
  console.log(row.id)
  const res = await deleteSchedule(row.id)
  ElMessage.success('删除成功')
  console.log(res)
  getScheduleListData()
}
// do not use same name with ref
// const form = reactive({
//   name: '',
//   region: '',
//   date1: '',
//   date2: '',
//   delivery: false,
//   type: [],
//   resource: '',
//   desc: '',
// })

// const onSubmit = () => {
//   console.log('submit!')
// }

// const handleClick = () => {
//   console.log('click')
// }

// const tableData = [
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//     tag: 'Home',
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//     tag: 'Office',
//   },
//   {
//     date: '2016-05-04',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//     tag: 'Home',
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//     tag: 'Office',
//   },
// ]

const sizeSpace = ref(40)

import type { ComponentSize } from 'element-plus'
import router from '@/router'
const currentPage = ref(5)
const pageSize = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}

.CaozuoDiv {
  margin-left: 20px;
  display:inline-block;
}

.example-basic .el-date-editor {
  margin: 8px;
}
</style>
